<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户省份数量分析</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body style="height: 100%; margin: 0">
    <div id="all" style="width: 1700px;height:750px;margin-top: 20px">
        <div id="container" style="width: 1300px;height:670px;display: inline-block;float: left"></div>
        <div id="other" style="width: 330px;height:650px;display: inline-block;float: left;margin-top: 20px">
            <table class="layui-hide" id="otherTable" lay-filter="otherTable"></table>
        </div>
    </div>

<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/resources/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/resources/jquery-3.1.1.min.js}"></script>
<script type="text/javascript">
    layui.use(['jquery','table','layer'],function(){
        var $=layui.jquery;
        var table=layui.table;

        //加载 数据
        table.render({
            elem: '#otherTable'
            ,url:'/customer/loadAllAddressOfCount'
            // ,toolbar: '#siteToolBar' //开启头部工具栏，并为其绑定左侧模板
            ,title: '客户地区数据'
            ,height:'full-230'
            ,page: false
            ,cols: [ [
                 {type: 'numbers', title:'序号',fixed: 'left',width:'40'}
                ,{field:'name', title:'省份地区',align:'center',width:'150'}
                ,{field:'value', title:'客户数量',align:'center',width:'120'}
            ] ]
        });
    });
    $.get("/customer/loadAllCustomerOfProvince", function (data) {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data.name,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 60,
                        margin: 10
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '客户数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.value
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    })
    // $.get("/customer/loadAllCustomerOfProvince", function (data) {
    //     var dom = document.getElementById("container");
    //     var myChart = echarts.init(dom);
    //     option = null;
    //     option = {
    //         title: {
    //             text: '云飞扬客户地区数据分析',
    //             subtext: '真实有效',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'item',
    //             formatter: '{a} <br/>{b} : {c} ({d}%)'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'left',
    //             data: data
    //         },
    //         series: [
    //             {
    //                 name: '客户来源',
    //                 type: 'pie',
    //                 radius: '55%',
    //                 center: ['50%', '60%'],
    //                 data: data,
    //                 emphasis: {
    //                     itemStyle: {
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     };
    //     if (option && typeof option === "object") {
    //         myChart.setOption(option, true);
    //     }
    // })
</script>
</body>
</html>
